<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
        }
    </style>
</head>

<body>

    <div id="a"></div>

    <script>

        let oDiv = document.querySelector('div');
        move(oDiv, 'left', 1100, 30)

        // 匀速运动        speed

        //   加速(speed++)  减速(speed--)  

        // function move(ele, prop, end, speed, cb) {
        //     var cur = parseInt(getComputedStyle(ele)[prop]);
        //     speed = end > cur ? speed : -speed;
        //     var t = setInterval(function () {
        //         console.log(speed);
        //         // 匀加速运动
        //         speed++;
        //         // 每次都在当前位置的基础上+20
        //         cur += speed;

        //         ele.style[prop] = cur + 'px';
        //         // 当前位置与终点位置的差值 在 20以内
        //         if (Math.abs(end - cur) <= Math.abs(speed)) {
        //             clearInterval(t);
        //             // 万一不能被20整除的时候，强制到达终点
        //             ele.style[prop] = end + 'px';
        //             cb && cb();
        //         }
        //     }, 50)
        // }



        // 减速
        function move(ele, prop, end, speed, cb) {
            var cur = parseInt(getComputedStyle(ele)[prop]);
            speed = end > cur ? speed : -speed;
            var t = setInterval(function () {
                console.log(speed);
                // 匀加速运动
                speed--;
                // 减速运动防止倒车  --- 保证速度至少是1
                speed = speed > 0 ? speed : 1;
                // 每次都在当前位置的基础上+20
                cur += speed;

                ele.style[prop] = cur + 'px';
                // 当前位置与终点位置的差值 在 20以内
                if (Math.abs(end - cur) <= Math.abs(speed)) {
                    clearInterval(t);
                    // 万一不能被20整除的时候，强制到达终点
                    ele.style[prop] = end + 'px';
                    cb && cb();
                }
            }, 20)
        }

    </script>

</body>

</html>